<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :lock-scroll="true"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    width="80%"
  >
    <div v-if="value!=null">
      <h-order-display v-model="datas" :admin="true"/>
    </div>
    <div v-if="value!=null" slot="footer" style="text-align: center">
      <el-button v-if="value.pay!=1" type="primary" :loading="loading" @click="change(1)"> 已付款</el-button>
      <el-button v-if="value.pay!=0" type="danger" :loading="loading" @click="change(0)"> 未付款</el-button>
      <el-button type="success" :loading="loading" @click="closed"><i class="fa fa-sign-out"></i> 关闭</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import AdminService from 'src/service/admin'
  import HOrderDisplay from 'src/components/common/display/HOrderDisplay'

  export default {
    name: 'HPayStatusDialog',
    mixins: [Dialog],
    components: {
      HOrderDisplay
    },
    data() {
      return {
        datas: [],
        loading: false
      }
    },
    watch: {
      value: function (c, d) {
        this.datas = [c]
      }
    },
    props: {
      value: {
        type: Object,
        default: null
      }
    },
    methods: {
      change: function (status) {
        const me = this
        const data = {
          ids: [me.value.id],
          status: status
        }
        me.loading = true
        AdminService.orderChangePayStatus(data).then(d => {
          if (d != null) {
            me.value.pay = status
            this.closed()
            me.$message.success('修改商品付款状态成功!')
          }
          me.loading = false
        })
      }
    }
  }
</script>
